<template>
  <div id="de" class="upload-file">
    <vue-viewer
      multiple
      :thumb="fileList"
      list-ul-class="image-list"
      :full="fileList"
    />
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { getFileInfo } from '@/api/projectFile'

export default {
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileList: [] // upload多文件数组
    }
  },
  mounted() {
    this.getDetailed()
  },
  methods: {
    getDetailed() {
      getFileInfo({ code: this.proid }).then(response => {
        this.fileList = response.data
      }).catch(function() {
      })
    }

  }
}
</script>
<style lang="scss"  scopes>
#de{
  ul,li{
  list-style: none !important;
}
  .image-list{
  margin: 0; padding: 0
}
li {
  display: inline-block;
  margin: 0 10px;
  position: relative;
}
.image-list li img {
  box-shadow: 0 0 5px #333;
}
.icon-remove{
  width: 20px; height:20px;
  text-align: center; line-height: 20px;
  background:#f33;
  position:absolute; top:-10px; right:-10px;
  border-radius: 10px;
  cursor: pointer;
  color:#fff;
}
a {
  color: #42b983;
}
}
</style>
